<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>Hello APP</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
  <style type="text/css">
    html,
    body {
      height: 100%;
    }
    header{
      /*height: 3.5rem;*/
    }
    .wrap {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-flex-flow: column;
    }
    .flex-1 {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
    }
    .aui-bar-tab-label{
      color:black;
    }
    .aui-bar-tab-item{
      position:relative;
      padding-top:0.5rem;
      font-size:7vw;
    }
    .my-icon{
      display:block;
      /*position:absolute;*/
      width:1.5rem;
      height:1.5rem;
      /*top:0.5rem;*/
      /*left:1.2rem;*/
      margin:0 auto;
      margin-bottom:0.2rem;
      text-align:center;
    }
    .active{
      color:red;
    }
    .my-search{
      width: 100%;
      height: 100%;
      background: #e14104;
      padding-top:0.2rem;
    }
    .my-logoImg{
      height: 100%;
      /*background: white;*/
      overflow: hidden;
      padding: 0.3rem 0.2rem 0.3rem 0.4rem;
    }
    .my-search-box{
     color:white;
      height:100%;
      /*background: white;*/
      padding: 0.3rem 0.2rem;
      position: relative;
    }
    .my-search-box input{
    	border-radius:1.5rem;
    	padding-left:0.5rem;
      border: 1px solid white;
      height: 90%;
      width:100%;
    }
    .my-messsage{
      height: 100%;
      /*background: white;*/
      font-size: 6vw;
      padding-left: 0.6%;
      color:white;
    }
    .my-search-icon{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 20%;
      font-size: 5vw;
      padding-left: 10%;
      color:white;
      /*text-align: center;*/
      /*background: red*/
    }
    .box-vertical-middle{
      display: flex;
    	align-items:center !important;
    	-webkit-align-items:center !important;
    	-moz-align-items:center !important;
    	-o-align-items:center !important;
    }
    .my-choose{
      background: #e14104;
      width: 100%;
      height: 100%;
      color: white;
      position: relative;
      padding-left: 33%;
      font-size: 5vw;
    }
    .my-fdj{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 10%;
      font-size: 6vw;
    }
    .my-dosearch{
      position: absolute;
      top: 0;
      right: 0;
      height: 85%;
      width: 85%;
      padding-right: 3%;
      border: 1px solid gray;
      border-radius: 4px;
      margin: 1% 5%;
      background: white
    }
    .my-dosearch i{
      color: gray;
      padding: 0.3rem;
    }
    .my-dosearch input{
      margin-right: 5%;
    }
    .my-setup{
      background: #f33d2f;
      width: 100%;
      height: 100%;
      color: white;
      position: relative;
    }
    .my-set{
      height: 100%;
    }
    .my-collection{
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
    }
    .my-deal{
      width: 100%;
      height: 100%;
      line-height: 2.5rem;
      text-align: center;
      color: white;
      background: #e14104;
      font-size: 5vw;
    }
  </style>
</head>

<body class="wrap">
  <header style="height:3.7rem;" class="header">
    <div class="aui-row my-search">
      <div class="aui-col-xs-1 my-logoImg">
      </div>
      <div class="aui-col-xs-10 my-search-box aui-row" onclick="goToSearchPage()">
        <input type="text" placeholder="" disabled=""/>
        <div class="aui-pull-right my-search-icon box-vertical-middle ">
          <i class="fa fa-search"></i>
        </div>
      </div>
      <div class="aui-col-xs-1 my-messsage box-vertical-middle" onclick="goToMessagePage()">
        <i class="fa fa-commenting"></i>
        <div class="aui-dot" style="background: rgba(0,0,0,0);border: 1px solid white"></div>
      </div>
    </div>
  </header>
  <header style="height:3.7rem;" class="header aui-hide">
    <div class="aui-row my-choose box-vertical-middle">
      <span id="pageTitle">请先选择游戏</span>
      <div class="aui-col-xs-1 aui-pull-right my-fdj box-vertical-middle" id="fdj" onclick="doSearch()" tapmode>
        <i class="fa fa-search"></i>

      </div>
      <div class="my-dosearch box-vertical-middle aui-hide" id="searchBox">
        <input type="text"placeholder="请输入游戏全名或拼音" class="">
        <i class="aui-iconfont aui-icon-close" onclick="closeSearch()"></i>
      </div>
    </div>
  </header>
  <header style="height:3.7rem;" class="header aui-hide">
    <div class="aui-row my-deal">

      <!-- <i class="aui-iconfont aui-icon-left aui-pull-left" style="font-weight:bold;padding:0 0.5rem"></i> -->
      约好交易
    </div>
  </header>
  <header style="height:3.7rem;" class="header aui-hide">
    <div class="aui-row my-setup">
      <div class="aui-col-xs-3 my-set box-vertical-middle" onclick="set()">
        <i class="fa fa-cog" style="font-size:7vw;margin-right:0.3rem;margin-left: 0.5rem"></i>
        <span>设置</span>
      </div>
      <div class="aui-col-xs-1 my-collection box-vertical-middle">
        <!-- <i class="fa fa-star-o" style="font-size:7vw;margin:0 18%"></i> -->
        <i class="fa fa-commenting" style="font-size:6vw;" onclick="goToMessagePage()"></i>
        <div class="aui-dot" style="background:rgba(0,0,0,0);border:1px solid white"></div>
      </div>
    </div>
  </header>

  <section class="flex-1">

  </section>
  <footer class="aui-bar aui-bar-tab" id="footer" style="background: white">
    <div class="aui-bar-tab-item" value="0" onclick="change(this)" tapmode id="first">
      <i class="my-icon aui-iconfont aui-icon-home" style="font-weight: bold"></i>
      <div class="aui-bar-tab-label active" style="font-size: 0.7rem">首页</div>
    </div>
    <div class="aui-bar-tab-item" value="1" onclick="change(this,'fPro')" tapmode>
      <i class="my-icon aui-iconfont aui-icon-cart" style="font-weight: bold"></i>
      <div class="aui-bar-tab-label" style="font-size: 0.7rem">我要买</div>
    </div>
    <div class="aui-bar-tab-item" value="2" onclick="change(this)" tapmode>
      <!--<div class="aui-badge">99</div>-->
      <i class="my-icon fa fa-handshake-o"></i>
      <div class="aui-bar-tab-label" style="font-size:0.7rem">约好交易</div>
    </div>

    <div class="aui-bar-tab-item" value="3" onclick="change(this)" tapmode>
      <i class="my-icon aui-iconfont aui-icon-my" style="font-weight: bold"></i>
      <div class="aui-bar-tab-label" style="font-size: 0.7rem">我的</div>
    </div>
  </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript">
  var header;
  var footer;
  var headerH;
  var footerH;
  var headers;
  var userId;
  var userHeader;
  var userName;
  apiready = function() {
  userId = $api.getStorage('userId');
  userHeader = $api.getStorage('userHeader');
  userName = $api.getStorage('userName');
    headers = $api.domAll('.header');
    for(var i=0;i<headers.length;i++){
      if($api.cssVal(headers[i],'display') == 'block'){
        header = headers[i];
      }
    }
    api.addEventListener({
        name: 'quit'
    }, function(ret, err){
        change($api.byId('first'));
    });
	api.addEventListener({
	    name: 'resetPassword'
	}, function(ret, err){
		change($api.byId('first'));
	});
	api.addEventListener({
	    name: 'resetPhone'
	}, function(ret, err){
		change($api.byId('first'));
	});
    api.addEventListener({
      name:'keyback'
    }, function(ret, err){
      api.closeWidget({
        silent:false
      });

    });
    api.addEventListener({
        name: 'reload'
    }, function(ret, err){
        window.location.reload();
    });

    // header = $api.dom('header'); // 获取 header 标签元素
    footer = $api.dom('footer'); // 获取 footer 标签元素

    // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
    // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
    // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
    headerH = $api.fixStatusBar(header);
    // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
    footerH = $api.fixTabBar(footer);
    api.openFrameGroup({
      name: 'firstPage',
      scrollEnabled:false,
      bounces: true,
      index:0,
      preload:0,
      rect: {
        marginTop: headerH,
        marginBottom: footerH,
        w: 'auto'
      },
      frames:[
      {
        name:'home',
        url:'../html/firstPage.html',
        scrollToTop:true,
        bounces: true,
      },
      {
        name:'buy',
        url:'../html/buy.html',
        scrollToTop:true,
        bounces: false,
      },
      {
        name:'deal',
        url:'../html/deal.html',
        scrollToTop:true,
        bounces: false,
        allowEdit:true,
      },
      {
        name:'user',
        url:'../html/user.html',
        scrollToTop:true,
        bounces: true,
      }
      ],
    },function(ret,err){

    });
    var index = api.pageParam.index;
    var tagAll = $api.domAll($api.byId('footer'), '.aui-bar-tab-item');
    change(tagAll[index],'fPro');
    api.addEventListener({
        name: 'frameClick'
    }, function(ret, err){
        if( ret ){
             change(tagAll[ret.value.index],ret.value.type);
             if(ret.value.type == 'shop'){
                $api.text($api.byId('pageTitle'), '请先选择店铺');

             }else{
               $api.text($api.byId('pageTitle'), '请先选择游戏');
             }
        }
    });
  };
  function change(tag,type){
    if($api.attr(tag, 'value') == 3 || $api.attr(tag, 'value') == 2){
      var userId = $api.getStorage('userId');
      if(!userId){
        api.openWin({
            name: 'login',
            url: './winLogin.html',
            pageParam: {
                page:'login',
                title: '登陆'
            }
        });
      }
    }
    var tagAll = $api.domAll($api.byId('footer'), '.aui-bar-tab-item');
    for (var i=0;i<tagAll.length;i++){
      if(i == $api.attr(tag, 'value')){
        $api.removeCls(headers[i], 'aui-hide');
        headerH = $api.fixStatusBar(headers[i]);
        api.setFrameGroupAttr({
            name: 'firstPage',
            rect:{
              marginTop: headerH,
              marginBottom: footerH,
              w: 'auto'
            }
        });
      }else{
        $api.addCls(headers[i], 'aui-hide');
      }
  		$api.removeCls($api.dom(tagAll[i], 'i'), 'active');
  		$api.removeCls($api.dom(tagAll[i], 'div'), 'active');
  		$api.addCls($api.dom(tag, 'div'), 'active');
  		$api.addCls($api.dom(tag, 'i'), 'active');
    }

    api.setFrameGroupIndex({
      name: 'firstPage',
      index:$api.attr(tag, 'value'),
      scroll:false,
      reload:true
    });
    if($api.attr(tag, 'value') == 1){
		api.openFrame({
	        name: 'wordChoose',
	        url: 'wordChooseFrame.html',
	        rect: {
		        x:0,
		        y:headerH,
		        w:api.winWidth/4.5,
		        h:api.winHeight-headerH-footerH
	        },
	        pageParam:{
	        	headerH:headerH+10,
	        	wordsW:api.winWidth/4.5+10,
	        	listW:api.winWidth-api.winWidth/4.5-20,
	        	listH:api.winHeight-headerH-footerH-20,
	        	productType:type
	        }
	    });
    }else{
    	api.closeFrame({
		    name: 'wordChoose'
		});
		api.closeFrame({
		    name: 'gameList'
		});
    }

  }
  function doSearch(){
    $api.addCls($api.byId('fdj'), 'aui-hide');
    $api.removeCls($api.byId('searchBox'), 'aui-hide');
  }
  function closeSearch(){
    $api.addCls($api.byId('searchBox'), 'aui-hide');
    $api.removeCls($api.byId('fdj'), 'aui-hide');
  }
  function goToSearchPage(){
    api.openWin({
      name: 'searchPage',
      url: './searchPage.html',
    });


  }
  function goToMessagePage(){
    var dotsArr = $api.domAll('.aui-dot');
    for(var i=0;i<dotsArr.length;i++){
      $api.addCls(dotsArr[i], 'aui-hide');
    }

    var userId = $api.getStorage('userId');
    if(userId){
      api.openWin({
          name: 'messagePage',
          url: './winMessage.html',
          pageParam: {
              page:'messagePage',
              title: '我的消息'
          }
      });

    }else{
      api.openWin({
          name: 'login',
          url: './winLogin.html',
          pageParam: {
              page:'login',
              title: '登陆'
          }
      });
    }

  }
  function set(){
    var userId = $api.getStorage('userId');
    if(userId){
      api.openWin({
          name: 'userSet',
          url: './win.html',
          pageParam: {
              page:'userSet',
              title: '设置'
          }
      });
    }else{
      api.openWin({
          name: 'login',
          url: './winLogin.html',
          pageParam: {
              page:'login',
              title: '登陆'
          }
      });
    }
  }
</script>

</html>
